<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <div class="table-operator">
      <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增/编辑</a-button>
    </div>
    <a-table rowKey="goods_id" :loading="isLoading" :columns="columns" :dataSource="loadData" :pagination="pagination"
      @change="tableChange" :scroll="{ x: 1400 }">
      <!-- 商品图片 -->
      <span slot="goods_image" slot-scope="text">
        <a title="点击查看原图" :href="text" target="_blank">
          <img width="50" height="50" :src="text" alt="商品图片" />
        </a>
      </span>
      <!-- 商品名称 -->
      <span slot="goods_name" slot-scope="text">
        <p style="width: 150px;">{{ text }}</p>
      </span>
      <!-- 商品状态 -->
      <span slot="status" slot-scope="text, item">
        <a-tag class="cur-p" :color="text == 10 ? 'green' : 'red'"
        >{{ text == 10 ? '上架' : '下架' }}</a-tag>
      </span>
    </a-table>

    <!-- 选择商品弹窗 -->
    <a-modal title="选择商品" centered :width="1400" :visible="visible" @cancel="chooseCancel" @ok="chooseSubmit">
      <a-input-search style="width: 200px;margin-bottom: 20px;" v-model="goodsName" placeholder="请输入商品名称或编码"
        @search="onSearch" />
      <a-table :dataSource="modalSource" rowKey="goods_id" :columns="modalColumns" :pagination="modalPagination"
        :loading="isLoading" @change="modalTableChange" :row-selection="rowSelection">
        <!-- 商品图片 -->
        <span slot="goods_image" slot-scope="text">
          <a title="点击查看原图" :href="text" target="_blank">
            <img width="50" height="50" :src="text" alt="商品图片" />
          </a>
        </span>
        <!-- 商品名称 -->
        <span slot="goods_name" slot-scope="text">
          <p style="width: 150px;">{{ text }}</p>
        </span>
        <!-- 商品状态 -->
        <span slot="status" slot-scope="text, item">
          <a-tag class="cur-p" :color="text == 10 ? 'green' : 'red'"
            @click="handleUpdateStatus([item.goods_id], text != 10)">{{ text == 10 ? '上架' : '下架' }}</a-tag>
        </span>
      </a-table>
    </a-modal>
  </a-card>
</template>

<script>
import * as GoodsApi from '@/api/goods'
// import { ContentHeader } from '@/components'
import { STable, GoodsItem, UserItem } from '@/components/Table'

// 表格表头
const columns = [
  {
    title: '商品ID',
    dataIndex: 'goods_id'
  },
  {
    title: '商品图片',
    dataIndex: 'goods_image',
    scopedSlots: { customRender: 'goods_image' }
  },
  {
    title: '商品名称',
    dataIndex: 'goods_name',
    width: '150px',
    scopedSlots: { customRender: 'goods_name' }
  },
  {
    title: '商品价格',
    dataIndex: 'goods_price_min',
    scopedSlots: { customRender: 'goods_price_min' }
  },
  {
    title: '库存总量',
    dataIndex: 'stock_total'
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
]

const modalColumns = [
  {
    title: '商品ID',
    dataIndex: 'goods_id'
  },
  {
    title: '商品图片',
    dataIndex: 'goods_image',
    scopedSlots: { customRender: 'goods_image' }
  },
  {
    title: '商品名称',
    dataIndex: 'goods_name',
    width: '150px',
    scopedSlots: { customRender: 'goods_name' }
  },
  {
    title: '商品价格',
    dataIndex: 'goods_price_min',
    scopedSlots: { customRender: 'goods_price_min' }
  },
  {
    title: '库存总量',
    dataIndex: 'stock_total'
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
]

export default {
  name: 'Index',
  components: {
    // ContentHeader,
    STable,
    GoodsItem,
    UserItem,
  },
  data() {
    return {
      // 当前表单元素
      searchForm: this.$form.createForm(this),
      // 评价分类列表
      categoryListTree: [],
      // 查询参数
      queryParam: {
        score: 0
      },
      // 正在加载
      isLoading: false,
      // 表头
      columns,
      // 列表
      loadData: [],
      //分页
      pagination: {
        current: 1,
        total: 0, // 总数据量
        pageSize: 15, // 每页显示条数
        showQuickJumper: true, // 是否可以快速跳转
      },

      // modal是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      //选择商品搜索框
      goodsName: '',
      //选择商品列表
      modalSource: [],
      //选择商品表头
      modalColumns,
      // 弹窗分页
      modalPagination: {
        current: 1,
        total: 0, // 总数据量
        pageSize: 10, // 每页显示条数
        showQuickJumper: true, // 是否可以快速跳转
      },
      // 选中商品id合集
      selectedRowKeys: []
    }
  },
  created() {
    //获取采购商品列表
    this.getGoods()
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys) => {
          this.selectedRowKeys = selectedRowKeys;
          this.selectedRowKeys = Array.from(new Set(this.selectedRowKeys));
        },
      };
    },
  },
  methods: {
    //获取采购商品列表
    getGoods(type) {
      GoodsApi.list({
        per_page: this.modalPagination.pageSize,
        page: this.modalPagination.current,
        goodsName: this.goodsName
      })
        .then(result => {
          this.modalSource = result.data.list.data
          this.modalPagination.total = result.data.list.total

          if (type != 'update') {
            //获取推荐商品列表
            this.getRecommendGoods()
          }
        })
        .finally(() => this.isLoading = false)
    },

    //获取推荐商品列表
    getRecommendGoods() {
      GoodsApi.recommendList({
        per_page: this.modalPagination.pageSize,
        page: this.modalPagination.current,
        key: 'recommended'
      })
        .then(result => {
          this.loadData = result.data.goodsList
          this.selectedRowKeys = this.loadData.map(item => item.goods_id)
        })
        .finally(() => this.isLoading = false)
    },

    // 商品列表分页
    tableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
    },

    // 打开选择商品弹窗
    handleAdd() {
      this.visible = true
    },

    //选择商品(弹窗中筛选商品信息搜索按钮)
    onSearch(e) {
      this.goodsName = e
      this.modalPagination.current = 1
      this.getGoods()  //采购商品列表
    },

    // 选择商品弹窗关闭按钮
    chooseCancel() {
      this.visible = false
      this.isLoading = false
    },

    // 选择商品弹窗ok按钮
    chooseSubmit() {
      this.loadData = this.modalSource.filter(item => this.selectedRowKeys.includes(item.goods_id));
      this.onFormSubmit()
    },

    // 弹窗商品列表分页
    modalTableChange(pagination, filters, sorter) {
      this.modalPagination.current = pagination.current
      this.getGoods('update')  //采购商品列表
    },

    // 提交到后端api
    onFormSubmit() {
      this.confirmLoading = true
      let form = {
        enabled: 1,
        params: {
          goodsIds: this.selectedRowKeys
        }
      }
      GoodsApi.recommendAdd({
        form, key: "recommended"
      })
        .then(result => {
          // 显示成功
          this.$message.success(result.message, 1.5)
          //获取推荐商品列表
          this.getRecommendGoods()
          // 关闭对话框事件
          this.visible = false
        })
        .finally(result => {
          this.confirmLoading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.ant-card-body {
  padding: 22px 29px 25px;
}

// 筛选tab
.tab-list {
  margin-right: 20px;
}
</style>
